import React, { Component } from "react";
import {
  SafeAreaView,
  StyleSheet,
  Dimensions,
  ImageBackground,
  ScrollView,
  TouchableOpacity, Text,
} from "react-native";

//静态资源引入
import background_catalogueMenu from "../../img/background_catalogueMenu.jpg"
import music_1 from "../../img/1.png"
import game_play from "../../img/game_play.jpg"
import background_catalogueMenu_2 from "../../img/background_catalogueMenu_2.jpg"
import background_catalogueMenu_3 from "../../img/background_catalogueMenu_3.jpg"

export default class CatalogueMenu extends Component{
  constructor() {
    super();
    this.state = {
      background : background_catalogueMenu,
      button_play : 'none',
      CatalogueMenu_display : 'flex'
    };
  }

  render() {
    return (
      <ImageBackground source={this.state.background} style={[styles.main,{display : this.state.CatalogueMenu_display}]}>
      <SafeAreaView>
        <ScrollView style={styles.scrollView}>
          <ImageBackground source={music_1} style={styles.the_music_img}>
            <TouchableOpacity onPress={()=>{
              this.setState({
                background : background_catalogueMenu_2,
                button_play : 'flex'
              })
            }}>
              <Text style={styles.the_music_name}>花の塔</Text>
              <Text style={styles.the_music_author}>さユり</Text>
            </TouchableOpacity>
          </ImageBackground>

          <ImageBackground source={music_1} style={styles.the_music_img}>
            <TouchableOpacity onPress={()=>{
              this.setState({
                background : background_catalogueMenu_3,
                button_play : 'flex'
              })
            }}>
              <Text style={styles.the_music_name}>花の塔</Text>
              <Text style={styles.the_music_author}>さユり</Text>
            </TouchableOpacity>
          </ImageBackground>

          <ImageBackground source={music_1} style={styles.the_music_img}>
            <TouchableOpacity onPress={()=>{
              this.setState({
                background : background_catalogueMenu_2,
                button_play : 'flex'
              })
            }}>
              <Text style={styles.the_music_name}>花の塔</Text>
              <Text style={styles.the_music_author}>さユり</Text>
            </TouchableOpacity>
          </ImageBackground>

          <ImageBackground source={music_1} style={styles.the_music_img}>
            <TouchableOpacity onPress={()=>{
              this.setState({
                background : background_catalogueMenu_3,
                button_play : 'flex'
              })
            }}>
              <Text style={styles.the_music_name}>花の塔</Text>
              <Text style={styles.the_music_author}>さユり</Text>
            </TouchableOpacity>
          </ImageBackground>

          <ImageBackground source={music_1} style={styles.the_music_img}>
            <TouchableOpacity onPress={()=>{
              this.setState({
                background : background_catalogueMenu_2,
                button_play : 'flex'
              })
            }}>
              <Text style={styles.the_music_name}>花の塔</Text>
              <Text style={styles.the_music_author}>さユり</Text>
            </TouchableOpacity>
          </ImageBackground>

          <ImageBackground source={music_1} style={styles.the_music_img}>
            <TouchableOpacity onPress={()=>{
              this.setState({
                background : background_catalogueMenu_3,
                button_play : 'flex'
              })
            }}>
              <Text style={styles.the_music_name}>花の塔</Text>
              <Text style={styles.the_music_author}>さユり</Text>
            </TouchableOpacity>
          </ImageBackground>

          <ImageBackground source={music_1} style={styles.the_music_img}>
            <TouchableOpacity onPress={()=>{
              this.setState({
                background : background_catalogueMenu_2,
                button_play : 'flex'
              })
            }}>
              <Text style={styles.the_music_name}>花の塔</Text>
              <Text style={styles.the_music_author}>さユり</Text>
            </TouchableOpacity>
          </ImageBackground>

          <ImageBackground source={music_1} style={styles.the_music_img}>
            <TouchableOpacity onPress={()=>{
              this.setState({
                background : background_catalogueMenu_3,
                button_play : 'flex'
              })
            }}>
              <Text style={styles.the_music_name}>花の塔</Text>
              <Text style={styles.the_music_author}>さユり</Text>
            </TouchableOpacity>
          </ImageBackground>
        </ScrollView>

        <ImageBackground source={game_play} style={[styles.game_play,{display:this.state.button_play}]}>
          <TouchableOpacity onPress={()=>{
            this.setState({
              CatalogueMenu_display : 'none'
            })
          }} style={styles.game_play_touch}>
          </TouchableOpacity>
        </ImageBackground>

      </SafeAreaView>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  main:{
    width : Dimensions.get("window").width,
    height : Dimensions.get("window").height,
    zIndex : 0
  },
  scrollView:{
    backgroundColor:'transparent',
    width : Dimensions.get("window").width/2,
    height : Dimensions.get("window").height/1.3,
    zIndex : 5,
    position:'absolute',
    top: Dimensions.get("window").height/9,
    left:Dimensions.get("window").width/11
  },
  the_music_img:{
    width : Dimensions.get("window").width/2,
    height : Dimensions.get("window").height/5.5,
  },
  the_music_name:{
    fontSize: 40,
    left:Dimensions.get("window").width/25,
    top:Dimensions.get("window").height/35,
    color:'black'
  },
  the_music_author:{
    fontSize: 40,
    left:Dimensions.get("window").width/3.1,
    top:-Dimensions.get("window").height/9.5,
    color:'black'
  },
  game_play:{
    zIndex : 10,
    width : Dimensions.get("window").width/3,
    height : Dimensions.get("window").height/4,
    position : 'absolute',
    left : Dimensions.get("window").width/1.6,
    top : Dimensions.get("window").height/1.6,
  },
  game_play_touch:{
    zIndex : 15,
    width : Dimensions.get("window").width/3,
    height : Dimensions.get("window").height/4,
  }
})
